<template>
  <div v-show="props.compType === 'treeSelect'">
    <el-form-item label="ID">
      <el-tooltip effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
        <el-input v-model="props.id" @change="handlerChangeGetId"></el-input>
      </el-tooltip>
    </el-form-item>
    
    <el-form-item label="标题">
      <el-input v-model="props.label"></el-input>
    </el-form-item>
    
    <el-form-item label="提示符">
      <el-input v-model="props.placeholder" placeholder="请输入提示符"/>
    </el-form-item>
    
    <el-form-item label="是否多选">
      <el-switch v-model="props.multiple" @change="multipleChange"></el-switch>
    </el-form-item>
    
    <el-form-item label="折叠标签" v-show="props.multiple">
      <el-switch v-model="props['collapse-tags']"></el-switch>
    </el-form-item>
    
    <el-form-item label="可清空">
      <el-switch v-model="props.clearable"></el-switch>
    </el-form-item>
    
    <el-form-item label="禁用">
      <el-switch v-model="props.disabled"></el-switch>
    </el-form-item>
    
    <el-form-item label="显示复选框">
      <el-switch v-model="props.showCheckbox"></el-switch>
    </el-form-item>
    
    <el-form-item label="数据类型">
      <el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
        <el-radio-button value="static">静态数据</el-radio-button>
        <el-radio-button value="dynamic">动态数据</el-radio-button>
      </el-radio-group>
    </el-form-item>
    
    <div v-show="props.dataType === 'static'">
      <el-divider>树形数据</el-divider>
      <el-button type="primary" size="small" @click="addRootNode">
        <el-icon><Plus /></el-icon>添加根节点
      </el-button>
      
      <el-tree
        :data="props.treeData"
        node-key="id"
        draggable
        :allow-drop="allowDrop"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <div class="tree-node">
            <el-input v-model="data.label" size="small" placeholder="节点名称"/>
            <el-input v-model="data.value" size="small" placeholder="节点值"/>
            <el-button type="danger" size="small" @click="removeNode(node, data)">
              <el-icon><Delete /></el-icon>
            </el-button>
            <el-button type="primary" size="small" @click="addChildNode(data)">
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>
        </template>
      </el-tree>
    </div>
    
    <div v-show="props.dataType === 'dynamic'">
      <el-form-item label="API地址">
        <el-input v-model="props.action"></el-input>
      </el-form-item>
      <el-form-item label="ID字段名">
        <el-input v-model="props.props.id"></el-input>
      </el-form-item>
      <el-form-item label="名称字段名">
        <el-input v-model="props.props.label"></el-input>
      </el-form-item>
      <el-form-item label="值字段名">
        <el-input v-model="props.props.value"></el-input>
      </el-form-item>
      <el-form-item label="子节点字段名">
        <el-input v-model="props.props.children"></el-input>
      </el-form-item>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Delete, Plus } from '@element-plus/icons-vue';

export default defineComponent({
  name: 'TreeSelectConfig',
  components: { Delete, Plus },
  props: {
    props: {
      type: Object,
      required: true
    },
    handlerChangeIdCallback: Function
  },
  setup(props) {
    const addRootNode = () => {
      props.props.treeData.push({
        id: Date.now(),
        label: '新节点',
        value: '',
        children: []
      });
    };

    const addChildNode = (parent: any) => {
      if (!parent.children) {
        parent.children = [];
      }
      parent.children.push({
        id: Date.now(),
        label: '新节点',
        value: '',
        children: []
      });
    };

    const removeNode = (node: any, data: any) => {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d: any) => d.id === data.id);
      children.splice(index, 1);
    };

    const allowDrop = () => true;

    const multipleChange = (val: boolean) => {
      props.props.modelValue = val ? [] : '';
    };

    const handlerChangeDataType = (value: string) => {
      if (value === 'static') {
        props.props.treeData = [];
      } else {
        props.props.treeData = [];
      }
    };

    return {
      addRootNode,
      addChildNode,
      removeNode,
      allowDrop,
      multipleChange,
      handlerChangeDataType
    };
  }
});
</script>

<style scoped>
.tree-node {
  display: flex;
  align-items: center;
  width: 100%;
}
.el-input {
  margin-right: 8px;
  width: 120px;
}

.el-button {
  margin-left: 8px;
}
</style>